<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <title>维修方案</title>
    <link rel="stylesheet" href="__PUBLIC__/Home/css1/planstyle.css"/>
    <link rel="stylesheet" href="__PUBLIC__/Home/css1/弹出框样式表.css"/>
    <!--<script type="text/javascript" src="js/action.js"></script>-->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--
作者：张津瑞
时间：2018-04-16
描述：(c) Copyright 2018 睿腾网络. All Rights Reserved.
-->
</head>

<body class="bg">
<script>
    function dianji() {
        alert("请输入门店地址")
    }
    function abc() {
        var aaa=document.getElementById('image1')
        var bbb=document.getElementById('image2')
        var ccc=document.getElementById('singal1')
        var sss=document.getElementById('sss')
        aaa.style.background="#ddd"
        bbb.style.background="#fff"
        ccc.innerHTML="全国连锁，统一门店，静候您的光临"
        sss.style.display="none"
    }
    function bcd() {
        var aaa=document.getElementById('image1')
        var bbb=document.getElementById('image2')
        var ccc=document.getElementById('singal1')
        var sss=document.getElementById('sss')
        aaa.style.background="#fff"
        bbb.style.background="#ddd"
        ccc.innerHTML="30分钟上门服务，让服务变的随时随地"
        sss.style.display="block"

    }
</script>


<div class="top_1">
    <p class="yugu">预估服务价</p>
    <p class="yuguj">￥
        <span class="yuguji">330</span></p>
</div>
<div class="top_2">
    <p class="top_2_1"><a href="#"><img src="__PUBLIC__/Home/images1/刷新.png" width="6%"/></a> 重选服务</p>
    <p class="top_2_2"><a href="#"><img src="__PUBLIC__/Home/images1/感叹号.png" width="6%"/></a> 服务列表</p>
</div>
<div class="center">
    <p class="fangshi">选择服务方式</p>
    <div class="image1" id="image1" onclick="abc()" style="background: #ddd"><img src="__PUBLIC__/Home/images1/门店.png" width="40%" height="90%"/>
        <p>到店服务</p>
    </div>
    <div class="image2" id="image2" onclick="bcd()"><img src="__PUBLIC__/Home/images1/上门服务.png" width="40%" height="90%"/>
        <p>上门服务</p>
    </div>
    <div class="clear"></div>

    <div id="singal1" class="singal">全国连锁，统一门店，静候您的光临</div>
    <!--<div id="singal2" class="singal">30分钟上门服务，让服务变的随时随地</div>-->
</div>
<div class="center_1">
    <div class="xian">
        <img src="__PUBLIC__/Home/images1/定位.png" width="4%"/><p class="center_0">请选择服务地址</p>
        <a href="#">&gt</a>
    </div>
    <div class="xian" id="sss"><img src="__PUBLIC__/Home/images1/时钟.png" width="4%"/><p class="center_0">请选择上门时间</p>
        <a class="" data-toggle="modal" data-target="#myModal">&gt</a>
    </div>
    <div class="xian"><img src="__PUBLIC__/Home/images1/优惠券.png" width="4%"/><p class="center_0">请选择优惠券</p>
        <a href="#">&gt</a>
    </div>
</div>
<div class="center_2">
    <p class="fix1">备注</p>
    <input type="text" placeholder="在此输入你的留言"/>
</div>
<div class="clear"></div>
<div class="bottom">
    <input class="fix2" type="checkbox"/><span class="color">我已经详细阅读并同意<span
        class="special">《赛文蒸汽洗车用户服务协议》</span></span>

</div>
<div class="bottom_1">
    <h4>温馨提示</h4>
    <p class="size">

        1.具体上门时间以工程师预约为准<br/> 2.损坏零件工程师需要收回，如需自留另补差价
        <br/> 3.该维修价格为预计金额，实际金额以工程师检测故障为准
    </p>
    <div class="bottom_2">

        <button class="bottom_2_1" type="button" onclick="alert('请选择服务类型
        ')">立即服务</button>

    </div>

</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <div class="modal-title1">
                    <h4 class="modal-title" id="myModalLabel">
                        请选择上门时间
                    </h4>
                </div>
            </div>

            <div class="modal-body">
                <p class="p1">上门日期</p>
                <input type="datetime-local">
                <!--<table style="text-align: center; " table width="100%" border="1" cellspacing="0" cellpadding="0">-->
                    <!--<tr>-->
                        <!--<a href="#">-->
                            <!--<td>04-16</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td>04-17</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td>04-18</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td>04-19</td>-->
                        <!--</a>-->
                    <!--</tr>-->
                    <!--<tr>-->
                        <!--<a href="#">-->
                            <!--<td>04-20</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td>04-21</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td>04-22</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td>04-23</td>-->
                        <!--</a>-->
                    <!--</tr>-->
                <!--</table>-->

            </div>
            <!--<div class="modal-footer">-->
                <!--<p class="p1">上门时间</p>-->
                <!--<table style="text-align: center; margin-bottom: 10%;" width="100%" border="1" cellspacing="0"-->
                       <!--cellpadding="0">-->
                    <!--<tr>-->
                        <!--<a href="#">-->
                            <!--<td>08:15</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td>09:15</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td>10:15</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td>11:15</td>-->
                        <!--</a>-->
                    <!--</tr>-->
                    <!--<tr>-->
                        <!--<a href="#">-->
                            <!--<td>12:15</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td>13:15</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td>14:15</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td>15:15</td>-->
                        <!--</a>-->
                    <!--</tr>-->
                    <!--<tr>-->
                        <!--<a href="#">-->
                            <!--<td> 16:15</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td> 17:15</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td> 18:15</td>-->
                        <!--</a>-->
                        <!--<a href="#">-->
                            <!--<td> 19:15</td>-->
                        <!--</a>-->
                    <!--</tr>-->
                <!--</table>-->

            <!--</div>-->
        </div>

        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>

</body>

</html>